<template>
	<view class="page">
		<view class="" style=" height: 250rpx; background: #00C08D;">
			<view class="card">
				<view class="u-padding-20 u-flex">
					<view @click="go">
						<u-image shape="circle" :src="technician.avatar" width="120" height="120"></u-image>
					</view>
					
					<view  style="width: 550rpx;" class="u-margin-left-20">
						<view class=" u-flex u-row-between" >
						  <view class="u-flex">
							  <view style="color: #00C08D;font-weight: bold;font-size: 34rpx;">{{technician.nickname}}</view>
							  <view class="u-margin-left-20 u-margin-right-20">
								<u-image src="/static/woman.png" width="30" height="30"></u-image>
							  </view>
							  <view class="u-margin-right-20" style=" color: #00C08D;">年龄:{{technician.age}}</view>
							  <u-tag type="success" size="mini" text="已认证"></u-tag>
						  </view>
							<view>
								<u-button @click="care" :type="is_collect?'error':'success'"  shape="circle" size="mini"> {{is_collect?'取消关注':'关注'}} </u-button>
							</view>
						</view>
						<view class="u-flex u-type-info " style="margin: 20rpx 0;"> 
						    
						 
							<view class="u-margin-right-20">服务：{{technician.service_number}}单</view>
							<view class="u-margin-right-20">浏览量：{{technician.view_number}}</view>
						</view>
						
						<view style="color: #00C08D;font-size: 26rpx;">
							远距离需额外收费
							
						</view>
					</view>
					
				
					
					
				</view>
				<view class="u-flex  u-flex-wrap" style="padding:0 30rpx 20rpx 30rpx;">
					<view v-for="(item,index) in technician.project_ids_arr" :key="index" class="u-margin-top-20 u-margin-right-20">
						<u-tag  bg-color="#fff" plain type='info '  :text="item.name"></u-tag>
					</view>
				</view>
				
				
				<view class="u-border-top u-padding-20 u-flex u-row-between">
					
					<u-rate disabled :value="technician.star" size="24" active-color="#FFCC00"></u-rate>
				
			     	<view class="u-type-info" @click="goEvaluate">
					{{technician.total_comments_num}}条评价
					 <u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			
			</view>
			
			<view class="u-margin-top-60"></view>
			
			<view @click="look(item)" v-for="(item,index) in project" :key="index" class="project">
				<view>
					<u-image  :src="$Url(item.images)" width="158" height="128"></u-image>
				</view>
				<view class="u-margin-left-20 u-flex-1" >
					<view class="u-font-weight">{{item.name}}</view>
					<view style="color:#00C08D;display: flex;justify-content: space-between;margin:10rpx 0;">
						<view> ￥{{item.price}} /{{item.service_duration}}分钟</view>
						<view>{{item.number}}下单</view>
					</view>
					<view class="u-type-info u-font-xs u-line-1 " style="width: 450rpx;">{{item.describe_content}}</view>
					
				</view>
			</view>
			
			
		</view>
		
		
		
	</view>
	
	
	
</template>

<script>
	
	import loader from '@/common/loadPage.js';
	
	
     export default {
		
		data(){
			return{
				id:'',
				technician:{},
				project: [],
				is_collect:0
		
			}
		},
		onLoad(options) {
			if(options.id){
				this.id=options.id;
			}
			this.jiazai()
		
		},
		methods:{
			go(){
				uni.navigateTo({
					url:'./technician_detail?id='+this.id
				})
			},
			goEvaluate(){
				uni.navigateTo({
					url:'../evaluate/list?Tid='+this.technician.id
				})
			},
			jiazai(){
				this.$u.post('/technician/details', {
					id:this.id
				}).then(res => {
					this.technician = res.technician;
					
					let project=res.project;
					
					// project.forEach(item=>{
					// 	console.log(item,"item")
					// 	item.images=item.images.split(",")
					// })
					
					this.project = project ;
					
					this.is_collect=res.is_collect
					
				}).catch(err => {})
			},
			care(){
				this.$u.post('/technician/setCollect', {
					technician_id:this.id
				}).then(res => {
					this.jiazai()
				}).catch(err => {})
			},
			look(item){
				uni.navigateTo({
					url:'./des?id='+item.id+'&tid='+this.technician.id
				})
			}
		}
	}
</script>

<style>
	.page{
		background: #F1F1F1;
		height: 100vh;
	}
	.card{
		background: #fff;
		margin: auto;
		border-radius: 20rpx;
		width: 680rpx;
		position: relative;
		top: 30rpx;
	
	}
	.project{
		background: #fff;
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
		width: 680rpx;
		margin: 20rpx auto;
		padding: 20rpx;
		border-radius: 10rpx;
		display: flex;
		
	}
</style>
